import React from 'react';

import {
  StyleSheet, View, Text, TouchableOpacity,
} from 'react-native';
import { Icon } from 'native-base';

export default ({
  cancel, title,
}) => (
  <View style={styles.root_container}>
    <TouchableOpacity style={{ padding: 10 }} onPress={cancel}>
      <Icon name="ios-arrow-back" />
    </TouchableOpacity>
    <View style={styles.circle_container}>
      <Text>
        {title}
      </Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  root_container: {
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
  },
  circle_container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
